<script setup>
import * as fileApi from "@/api/fileApi.js"

const props = defineProps({
  fileObj: {
    type: Object,
    required: true
  }
})

</script>

<template>
  <div class="component-file" :style="{opacity: props.fileObj.hidden && !props.fileObj.drive ? 0.5 : 1}" :title="props.fileObj.name" :data-obj="JSON.stringify(props.fileObj)">
    <div class="component-file-img">
      <el-image draggable="false" style="width: 50px; height: 50px" fit="contain" :src="fileApi.icon(props.fileObj.absolutePath)"/>
    </div>
    <div class="component-file-name"><span>{{ props.fileObj.name }}</span></div>
  </div>
</template>

<style scoped>
.component-file {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  user-select: none;
  cursor: pointer;
}

.component-file-img{
  margin-top: 10px;
}

.component-file-name{
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%; /* 让文本容器占满 */
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 省略号 */
}

.component-file-name span {
  display: inline-block;
  max-width: 100%; /* 限制最大宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  font-family: "Helvetica", "汉仪旗黑", sans-serif;
  color: #2f2f2f;
}
</style>